<script lang="ts" setup>
import Header from "@/components/author/Header.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, toRefs} from "vue";
import {listBooks} from "@/api/author";

const route = useRoute();
const router = useRouter();
interface SearchCondition {
  pageNum: number;
  pageSize: number;
}
const state = reactive({
  books: [],
  searchCondition: {} as SearchCondition,
  backgroud: true,
  total: 0,
  pageSize: 10,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL
});
const {books, backgroud, total, pageSize, imgBaseUrl} = toRefs(state)
onMounted(async () => {
  await load();
});

const load = async () => {
  const {data} = await listBooks(state.searchCondition);
  state.books = data.list;
  state.searchCondition.pageNum = data.pageNum;
  state.searchCondition.pageSize = data.pageSize;
  state.total = Number(data.total);
};

const handleCurrentChange = (pageNum:any) => {
  state.searchCondition.pageNum = pageNum;
  load();
};
</script>
<template>
  <div class="main">
    <div class="container">
      <div class="top">
        <Header></Header>
      </div>
      <div class="bottom">
        <div class="left">
          <div>
            <RouterLink :to="{'name':'authorBookList'}">小说管理</RouterLink>
          </div>
        </div>
        <div class="right">
          <div v-if="total == 0" class="no-content">
            <div class="create-btn">

              <router-link :to="{ name: 'authorBookAdd' }" class="link">
                <el-button round type="primary">创建作品</el-button>
              </router-link>

            </div>
          </div>
          <div v-if="total>0" class="content">
            <div class="title">
              <span>小说列表</span>
              <router-link :to="{ name: 'authorBookAdd' }" class="btn_red" style="color: white;text-decoration: none">
                <el-button round type="primary">
                  发布小说
                </el-button>
              </router-link>
            </div>
            <div class="table">
              <el-table :data="books">
                <el-table-column align="center" label="封面" width="80">
                  <template #default="scope">
                    <span><img :alt="scope.row.bookName" :src="`${imgBaseUrl}` + `${scope.row.picUrl}`" height="70"
                               style="object-fit: cover" width="50"/></span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="书名" width="120">
                  <template #default="scope">
                    <span>{{ scope.row.bookName }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="分类" prop="categoryName" width="80"></el-table-column>
                <el-table-column align="center" label="点击量" prop="visitCount" width="80"></el-table-column>
                <el-table-column align="center" label="更新时间">
                  <template #default="scope">
                    <span>{{ scope.row.updateTime }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="总字数" prop="wordCount"></el-table-column>
                <el-table-column align="center" label="操作">
                  <template #default="scope">
                    <router-link :to="{'name':'authorChapterList','query':{'id':scope.row.id}}" class="redBtn"
                                 style="color: white;text-decoration: none">
                      <el-button round size="default" type="primary">
                        章节管理
                      </el-button>
                    </router-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="page-nav">
              <el-pagination
                  :background="backgroud"
                  :page-size="pageSize"
                  :total="total"
                  layout="prev, pager, next"
                  small
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  background-color: #F5F5F5;
  padding: 20px;

  .container {
    width: 60%;
    background-color: #fff;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .bottom {
      display: flex;
      .left {
        flex: 1;
        padding: 10px 0;
        div {
          padding: 10px;
          width: 80%;
          text-align: center;
          border-left: 5px solid #48A4FF;
          background-color: #F5F5F5;
          a {
            text-decoration: none;
          }
        }

        border-right: 2px solid #F5F5F5;
      }

      .right {
        flex: 3;
        padding: 10px;

        .no-content {
          height: 80vh;
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          .create-btn {
            .el-button {
              width: 120px;
              height: 40px;
            }
          }
        }

        .content {
          height: 100%;
          //border: 1px solid #000;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          gap: 20px;

          .title {
            display: flex;

            span {
              font-size: 25px;
            }

            justify-content: space-between;
          }

          .table {
            //border: 1px solid #000;
            overflow-x: hidden;
            overflow-y: auto;
          }

          .page-nav {
            padding-bottom: 20px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>